<!-- 数据报告 -->
<template>
  <div class="app-container" style="padding-top: 5px">
    <el-tabs v-model="currentTabs">
      <el-tab-pane label="医生工作量汇总表" name="collect"></el-tab-pane>
      <el-tab-pane label="医生工作量明细表" name="particulars"></el-tab-pane>
    </el-tabs>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="90px"
    >
      <el-form-item label="更新时间">
        <div class="disFlxAC" style="width: 160px">
          <div class="color6">{{ refreshTime }}</div>
          <el-button type="text" class="px-10" @click="handleQuery"
            >刷新</el-button
          >
        </div>
      </el-form-item>
      <el-form-item label="所属单位" prop="companyId">
        <SelectCompany
          :defaultValue.sync="queryParams.companyId"
          :companyType="0"
          placeholder="请选择所属单位"
          @change="handleQuery"
        />
      </el-form-item>
      <el-form-item label="时间范围" prop="createTime">
        <el-date-picker
          v-model="createTime"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
          :picker-options="{
            shortcuts: shortcutsData,
          }"
          @change="handleQuery"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <!-- <el-radio-group v-model="currentType" @input="handleQuery" class="mb-15">
      <el-radio-button label="video">视频看诊</el-radio-button>
      <el-radio-button label="audit">远程审方</el-radio-button>
    </el-radio-group> -->

    <div class="disFlxJS pb-15">
      <div class="disFlxAC" v-if="collectData.length">
        <div
          v-for="item in collectData"
          :key="item.title"
          class="tc pa-10 colorF br-5 mr-15 statisticsBox"
          :style="{ background: item.bgColor }"
        >
          <div class="fw-6 fz-14">{{ item.title }}</div>
          <div class="pt-10">{{ item.num || 0 }}</div>
          <el-tooltip effect="dark" :content="item.tips" placement="top">
            <i class="iconfont el-icon-question" />
          </el-tooltip>
        </div>
        <div class="color9 fz-14">（该数据仅为视频看诊）</div>
      </div>
      <div>
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出</el-button
        >
      </div>
    </div>

    <VideoCollect
      v-if="currentTabs === 'collect' && currentType === 'video'"
      :tableList="tableList"
    />
    <VideoParticulars
      v-if="currentTabs === 'particulars' && currentType === 'video'"
      :tableList="tableList"
    />

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import SelectCompany from "@/components/SelectCompany";
import { shortcutsData } from "@/utils/ruoyi";
import VideoCollect from "./videoCollect";
import VideoParticulars from "./videoParticulars";
import {
  getDoctorSta,
  getDoctorLine,
  getDoctorDetail,
} from "@/api/dataStatistics";

export default {
  name: "DataReport",
  components: {
    SelectCompany,
    VideoCollect,
    VideoParticulars,
  },
  data() {
    return {
      currentTabs: "collect", // collect || particulars
      currentType: "video", // video || audit

      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      createTime: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyId: null,
        startTime: null,
        endTime: null,
      },
      refreshTime: null,
      shortcutsData,
      // 统计数据
      collectData: [],
      // 表格数据
      tableList: [],
    };
  },
  created() {
    this.getList();
  },
  activated() {
    this.getList();
  },
  watch: {
    currentTabs(nval) {
      this.resetQuery();
    },
    currentType(nval) {
      this.resetQuery();
    },
  },
  methods: {
    getList() {
      this.refreshTime = this.parseTime(new Date(), "{y}-{m}-{d} {h}:{i}");
      this.queryParams.startTime = this.createTime && this.createTime.length ? this.createTime[0] : "";
      this.queryParams.endTime = this.createTime && this.createTime.length ? this.createTime[1] : "";

      if (this.currentTabs === "collect" && this.currentType === "video") {
        // 获取汇总表 - 视频看诊
        getDoctorSta(this.queryParams).then((res) => {
          this.collectData = [
            {
              title: "看诊医生(人)",
              bgColor: "#67c23a",
              num: res.data.doctorTotal,
              tips: '指定时间范围与所选单位下，视频看诊的医生总人数'
            },
            {
              title: "看诊人次",
              bgColor: "#e6a23c",
              num: res.data.personTotal,
              tips: '指定时间范围与所选单位下，视频看诊医生的看诊总次数'
            },
            {
              title: "看诊时长(分)",
              bgColor: "#f56c6c",
              num: res.data.durationTotal,
              tips: '指定时间范围与所选单位下，视频看诊医生的总时长'
            },
            {
              title: "看诊金额(云豆)",
              bgColor: "#409eff",
              num: res.data.costTotal,
              tips: '指定时间范围与所选单位下，视频看诊医生的总收入'
            },
          ];
        });
        getDoctorLine(this.queryParams).then((response) => {
          this.tableList = response.rows;
          this.total = response.total;
        });
      } else if (
        this.currentTabs === "collect" &&
        this.currentType === "audit"
      ) {
        // 获取汇总表 - 远程审方
        this.collectData = [
          {
            title: "审方医生(人)",
            bgColor: "#67c23a",
            num: 0,
          },
          {
            title: "审方单数(单)",
            bgColor: "#e6a23c",
            num: 0,
          },
          {
            title: "审方金额",
            bgColor: "#f56c6c",
            num: 0,
          },
        ];
        this.tableList = [];
      } else if (
        this.currentTabs === "particulars" &&
        this.currentType === "video"
      ) {
        // 获取明细表 - 视频看诊
        this.collectData = [];
        getDoctorDetail(this.queryParams).then((response) => {
          this.tableList = response.rows;
          this.total = response.total;
        });
      } else if (
        this.currentTabs === "particulars" &&
        this.currentType === "audit"
      ) {
        // 获取明细表 - 远程审方
        this.collectData = [];
        this.tableList = [];
      }
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.createTime = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 导出按钮操作 */
    handleExport() {
      this.queryParams.startTime = this.createTime && this.createTime.length ? this.createTime[0] : "";
      this.queryParams.endTime = this.createTime && this.createTime.length ? this.createTime[1] : "";

      if (this.currentTabs === "collect" && this.currentType === "video") {
        this.download(
          "order/order/exportDoctorLine",
          {
            ...this.queryParams,
          },
          `医生工作量汇总表_${this.parseTime(new Date(), "{y}-{m}-{d}")}.xlsx`
        );
      }else if (
        this.currentTabs === "collect" &&
        this.currentType === "audit"
      ) {

      } else if (
        this.currentTabs === "particulars" &&
        this.currentType === "video"
      ) {
        this.download(
          "order/order/exportDoctorDetail",
          {
            ...this.queryParams,
          },
          `医生工作明细表_${this.parseTime(new Date(), "{y}-{m}-{d}")}.xlsx`
        );
      } else if (
        this.currentTabs === "particulars" &&
        this.currentType === "audit"
      ) {
      }

    }
  },
};
</script>

<style lang="scss" scoped>
.statisticsBox{
  width: 200px; height: 67px;
  position: relative;
  .el-icon-question{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
  }
}
</style>
